<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" type="text/css" href="css/common.css" />
    <title>NCRE2</title>
  <style>
    .login-panel{
      background-color: #004b7e;
      height:100vh;
      width:100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      align-items: center;
      color:#fff;
    }
    .page-title{
      font-size: 180%;
      margin-top:100px;
    }
    .form-panel{
      margin-top:50px;
      width:90%;
      padding:0 5%;
    }
    .form-row{
      display: flex;
      flex-direction: column;
      width:100%;
      margin-top:5%;
    }
    .form-row .form-label{
      color:rgba(255,255,255,0.8);
    }
    .form-row .form-input{
      height:32px;
      padding:5px 15px;
      border:none;
      border-radius: 5px;
      outline: none;
      margin-top:5px;
    }
    .form-row.buttons{
      margin:15% auto;
    }
    .form-row .form-button{
      background-color: rgba(255,255,255,0.5);
      padding:5px 15px;
      border-radius: 5px;
      text-align: center;
      height:32px;
      line-height: 32px;
    }
    .form-row .form-button.link-button{
      background-color: transparent;
      margin-top:20px;
    }
    .form-row .form-button.link-button a{
      color:#fff;
      text-decoration: none;
    }
    .error-text{
      color:#d5503f;
    }
  </style>
</head>
<body>
  <div class="login-panel">
    <h1 class="page-title">NCRE二级Java练习助手</h1>
    <div class="form-panel">
      <div class="form-row">
        <div class="form-label">登录名：</div>
        <input class="form-input" placeholder="请输入登录账户" id="loginName"/>
      </div>
      <div class="form-row">
        <div class="form-label">密&nbsp;&nbsp;码：</div>
        <input class="form-input" type="password" placeholder="请输入账户密码" id="loginPassword"/>
      </div>

      <div class="form-row">
        <div class="error-text" id="errorText">用户名密码错误</div>
      </div>

      <div class="form-row buttons">
        <div class="form-button" id="loginButton">立即登录</div>
        <div class="form-button link-button">
          <a href="regist.html" target="_self">注册账号</a>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  /**
   * 数据层：登录账户数据对象
   * @param login 登录名
   * @param password 登录密码
   * @constructor
   */
  function AccountInfo(login,password){
    this.username=login
    this.password=password
    this.rememberMe=true
  }
  /**
   * 展示层：显示信息
   * @param message 需要显示的信息
   */
  function showMessage(message){
    //找到用于显示信息的div，id=errorText，改变div的文本值
    let infoDiv=document.querySelector("#errorText")
    if(infoDiv!=null){
      infoDiv.textContent=message
    }
  }

  /**
   * 交互层：页面加载
   */
  window.onload=function(){
    //清空信息提示
    showMessage("")
  }

  /**
   * 根据input输入框的id值，返回这个input的value
   * @param inputId
   */
  function getValue(inputId){
    let input=document.querySelector("#"+inputId)
    if(input!=null){
      return input.value
    }else{
      return null
    }
  }

  //交互层：注册按钮点击事件
  let loginButton=document.querySelector("#loginButton")
  if(loginButton!=null){
    loginButton.addEventListener("click",function(){
      console.log("登录按钮点击")
      showMessage("")
      //1、表单验证
      //(1)必填项验证
      let loginName=getValue("loginName")
      if(loginName==null || loginName==""){
        showMessage("请输入登录名")
        return
      }
      let password=getValue("loginPassword")
      if(password==null || password==""){
        showMessage("请输入密码")
        return
      }
      //2、发送请求
      let accountInfo=new AccountInfo(loginName,password)
      console.log("用于登录的数据：",accountInfo)
      let request=new XMLHttpRequest()
      request.onreadystatechange=function(){
        if(request.readyState==4){
          console.log("注册请求完成：",request)
          if(request.status==200){
            //注册成功
            showMessage("登录成功。")
            //解析出得到的令牌，将它存到浏览器中
            let result=JSON.parse(request.responseText)
            console.log("登录结果：",result)
            if(result.id_token){
              let token=result.id_token
              //将它存到浏览器中1
              localStorage.setItem("token",token)
              console.log("登录成功，进行跳转")
              window.location.href="home.html"
            }
          }else{
            //注册错误
            let result=JSON.parse(request.responseText)
            showMessage("登录发生错误："+result.title)
          }
        }
      }
      request.open("POST","http://ncre2-server.nj-agile.com/api/authenticate")
      request.setRequestHeader("Content-Type","application/json")
      request.send(JSON.stringify(accountInfo))
    })
  }
</script>
</html>